<template>
  <view>
    <!-- :style="{'background-color':`rgba(255,255,255,${opacity})`}" -->
    <view class="top_nav_bar" :style="{ 'background-color': `rgba(255,255,255,${opacity})` }">
      <view class="safe-area" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="nav_bar">
        <view class="top">
          <view class="icon_box" @click="onClickLeft">
            <van-icon name="arrow-left" />
          </view>
          <view class="tab" v-if="opacity > 0.3">
            <view class="box" :class="opacity > 0.7 ? '' : 'active'" :style="{ opacity }" @click="backTop">
              商品
            </view>
            <view class="box" :class="opacity > 0.7 ? 'active' : ''" :style="{ opacity }">
              详情
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 750rpx;" class="content" :style="{ paddingBottom: (safeAreaBottom + 80) + 'px' }">
      <view class="swiperBox">
        <uni-swiper-dot :info="imgList" :current="current" field="content" mode="nav"
          :dotsStyles="{ backgroundColor: '#E6E6E6', selectedBackgroundColor: '#FF1642', bottom: 5 }">
          <swiper class="home-swiper" :indicator-dots="true" interval="5000" duration="200"
            @change="e => current = e.detail.current" indicator-active-color="#fff" indicator-color="#FFFFFF99">
            <swiper-item v-for="(i, index) in imgList" :key="index">
              <view class="pic">
                <image :src="i.imgUrl" mode="aspectFill"></image>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <view class="info">
        <view class="price" style="margin-bottom: 16rpx;">
          <PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="detailInfo.normsPrice" />
          <view class="right">
            <text style="margin-right: 20rpx;" v-if="detailInfo.limitCount != 0">限购 {{ detailInfo.limitCount }}KG</text>
            <text style="margin-right: 20rpx;" v-if="detailInfo.sale > 100">销量 {{ detailInfo.sale }}</text>
            <text>库存 {{ detailInfo.releaseStock > 1000 ? '999+' : detailInfo.releaseStock }}</text>
          </view>
        </view>
        <view class="title van-multi-ellipsis--l2">
          {{ detailInfo.name }}
        </view>
        <view class="sub_title">
          <text style="margin-right: 24rpx;">{{ detailInfo.subTitle }}</text>
          <!-- <text v-if="detailInfo.limitCount != 0">限购 {{ detailInfo.limitCount }}KG</text> -->
        </view>
      </view>

      <view class="detail">
        <view class="title">商品详情</view>
        <view class="line">
          <text>商品名</text>
          <text>{{ detailInfo.name }}</text>
        </view>
        <view class="line">
          <text>规格</text>
          <text>{{ detailInfo.deliveryNorms }}KG</text>
        </view>
      </view>

      <view class="richText">
        <rich-text :nodes="detailInfo.detailsInfo"></rich-text>
      </view>
      <view class="small">
        本小程序商品图片均由商家提供
      </view>
      <!-- <view class="info_msg">
        <view class="picBox">
          <view class="pic">
            <image src="/packageA/static/detail/detail_img.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="lineBox">
          <view class="title">
            货品丰富
          </view>
          <view class="sub_title">
            品牌好货，订货好管家
          </view>
        </view>
        <view class="lineBox">
          <view class="title">
            灵活下单
          </view>
          <view class="sub_title">
            线上下单，线下下单，多方式支持您的订单需求
          </view>
        </view>
        <view class="lineBox">
          <view class="title">
            物流配送
          </view>
          <view class="sub_title">
            物流会按照您所购买商品的配送时间，配送到您指定的收货地址
          </view>
        </view>
      </view> -->
    </view>


    <view class="bottomFix" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view class="left">
        <view class="icon_box" @click="toBackPage(0)">
          <view class="pic">
            <image src="/static/tabbar/home.png" mode="aspectFill"></image>
          </view>
          <view class="txt">首页</view>
        </view>
        <view class="icon_box" @click="toBackPage(1)">
          <view class="pic">
            <image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png' : '/static/tabbar/shopcar.png'"
              mode="aspectFill"></image>
            <view class="point" v-if="allCount != 0">{{ allCount }}</view>
          </view>
          <view class="txt" :class="allCount != 0 ? 'active' : ''">购物车</view>
        </view>
      </view>
      <view class="btn" @click="addCar">加入购物车</view>
    </view>
  </view>
</template>

<script>
let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
import { reqGetNonStandardGoodsDetail } from '@/apis/rexiaogoods';
import { reqAddGoodsToCart } from '@/apis/rexiaogoods.js'
import app from '@/App.vue';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      id: "", // 商品id
      statusBarHeight: app.globalData.statusBarHeight,
      opacity: 0,
      safeAreaBottom: safeAreaBottom,
      imgList: [],
      current: 0,
      detailInfo: {
        releaseStock: 0,
        name: "",
        limitCount: 0,
        subTitle: "",
        unitName: "",
        normsInfo: "",
        brandName: "",
        producer: "",
        expiryNum: 0,
        detailsInfo: "",
        normsPrice: 0,
        deliveryNorms: "",
      }
    };
  },
  computed: {
    ...mapGetters('car', ['allCount', 'allMoney'])
  },
  onLoad(params) {
    this.id = params.id;
    if (this.id != '') {
      this.getGoodsDetail();
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    async getGoodsDetail() {
      let { id } = this;
      let res = await reqGetNonStandardGoodsDetail({ id });
      if (res.code === 200) {
        console.log('商品详情', res.data);
        this.imgList = res.data.imgUrlList.map(item => ({ content: '', imgUrl: item }));
        this.detailInfo = res.data;
        this.detailInfo.detailsInfo = res.data.detailsInfo.replace(/<img/gi, '<img style="max-width:100%;width:100%;display:block;"')
      }
    },
    backTop() {
      uni.pageScrollTo({ scrollTop: 0, duration: 100 })
    },
    async addCar() {
      const res = await reqAddGoodsToCart({
        ecCommodityId: this.id,
        type: this.detailInfo.type
      })
      if (res.code === 200) {
        uni.utils.toast('加入购物车成功');
        this.$store.dispatch('car/addToCar', res.data)
        console.log('total', this.$store.getters['car/allCount'], this.$store.getters['car/allMoney']);
      }
      // console.log(res);
    },
    toBackPage(type) {
      uni.switchTab({ url: type === 0 ? '/pages/index/index' : '/pages/shopCar/shopCar' });
    }
  },
  onPageScroll(e) {
    if (e.scrollTop <= 44) {
      this.opacity = e.scrollTop / 44 * 1
    } else if (e.scrollTop > 44) {
      this.opacity = 1
    }
  },
}
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.top_nav_bar {
  position: fixed;
  z-index: 200;
}

.nav_bar {
  width: 100%;

  .top {
    padding-left: 24rpx;
    height: 92rpx;
    display: flex;
    align-items: center;

    .icon_box {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tab {
      margin: 0 auto;
      font-size: 32rpx;
      color: #333333;
      line-height: 38rpx;
      transform: translateX(-40rpx);

      .box {
        padding: 10rpx 0;
        display: inline-block;
        margin: 0 15rpx;

        &.active {
          border-bottom: 2px solid #FF1642;
          color: #FF1642;
        }
      }
    }
  }
}

.content {
  .swiperBox {
    width: 750rpx;
    height: 600rpx;

    .home-swiper {
      width: 100%;
      height: 600rpx;

      .pic {
        width: 750rpx;
        height: 600rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    /deep/ .uni-swiper__dots-nav {
      width: 60rpx !important;
      height: 34rpx !important;
      background: rgba(0, 0, 0, 0.6) !important;
      border-radius: 17rpx !important;
      padding: 0 !important;
      left: 666rpx !important;
      bottom: 24rpx !important;

      text {
        margin: 0 !important;
        display: inline-block;
        width: 100%;
        text-align: center;
      }
    }
  }

  .info {
    background-color: #fff;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 24rpx;
    flex-direction: column;

    .price {
      display: flex;
      justify-content: space-between;

      .right {
        font-weight: 400;
        font-size: 24rpx;
        color: #808080;
        display: flex;
        align-items: center;
      }
    }

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 16rpx;

    }

    .sub_title {
      font-weight: 400;
      font-size: 24rpx;
      color: #808080;
    }

    // .right {
    //   flex: 1;
    //   text-align: right;
    //   font-weight: 400;
    //   font-size: 24rpx;
    //   color: #808080;
    // }
  }

  .detail {
    padding: 24rpx;
    background-color: #fff;
    margin-bottom: 24rpx;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 24rpx;
    }

    .line {
      margin-bottom: 24rpx;

      text {
        &:nth-child(1) {
          width: 130rpx;
          display: inline-block;
          font-weight: 400;
          font-size: 28rpx;
          color: #808080;
          margin-right: 48rpx;
        }

        &:nth-child(2) {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }

  .richText {
    width: 750rpx;
    
    margin-bottom: 24rpx;
  }

  .small {
    width: 750rpx;
    text-align: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #808080;
    margin-bottom: 24rpx;
    position: relative;

    &::after {
      content: '';
      width: 20rpx;
      height: 8rpx;
      background-color: #DDDDDD;
      border-radius: 4rpx;
      position: absolute;
      top: 50%;
      right: 144rpx;
      transform: translateY(-50%);
    }

    &::before {
      content: '';
      width: 20rpx;
      height: 8rpx;
      background-color: #DDDDDD;
      border-radius: 4rpx;
      position: absolute;
      top: 50%;
      left: 144rpx;
      transform: translateY(-50%);
    }
  }

  .info_msg {
    background-color: #fff;
    padding: 0 24rpx 1rpx 24rpx;
    width: 750rpx;
    box-sizing: border-box;

    .picBox {
      margin: 0 auto;
      width: 336rpx;
      height: 62rpx;
      background-color: #FF1642;
      border-radius: 0rpx 0rpx 38rpx 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .pic {
        width: 288rpx;
        height: 38rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .lineBox {
      width: 520rpx;

      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 16rpx;
      }

      .sub_title {
        font-weight: 500;
        font-size: 24rpx;
        color: #808080;
        margin-bottom: 48rpx;
      }
    }
  }
}

.bottomFix {
  position: fixed;
  width: 750rpx;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  padding-right: 24rpx;
  align-items: center;

  .left {
    margin-left: 48rpx;

    .icon_box {
      display: inline-block;
      width: 70rpx;
      margin-right: 38rpx;

      .pic {
        margin: 0 auto;
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 6rpx;
        position: relative;

        .point {
          position: absolute;
          top: -5rpx;
          right: -5rpx;
          font-weight: 500;
          font-size: 16rpx;
          color: #FFFFFF;
          width: 20rpx;
          height: 20rpx;
          background-color: #FF3030;
          border-radius: 50%;
          text-align: center;
          line-height: 20rpx;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }

      .txt {
        width: 100%;
        font-weight: 400;
        font-size: 20rpx;
        color: #333333;
        text-align: center;

        &.active {
          color: #FF1642 !important;
        }
      }
    }
  }

  .btn {
    margin-right: 24rpx;
    width: 434rpx;
    height: 76rpx;
    background: #FF1642;
    border-radius: 40rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 76rpx;
    text-align: center;

    &.red {
      color: #FF1642;
      border: 2rpx solid #FF1642;
    }
  }
}
</style>